<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
   <style>


       li {
           width: 200px;
           height: 80px;
           line-height: 80px;
           text-align: center;
           float: left;
           border: 1px solid red;
           font-size: 50px;
           list-style: none;
       }
       .active {
           color: red;
           background-color: orange;
       }

       img {
           display: none;
           
       }
       .activeImg {
           display: block;
       }

   </style>

</head>

<body>
    <div id='app'>
   <ul>
       <li v-for='(item,index) in list' :key='index' 
        :class="index==currentIndex  ? 'active':''"
        @click='changeIndex(index)'
        >
          <span>  {{item.title}}</span> 
       
       </li>

   
        <img  
        v-for='(item,index) in list' :key='index' 
         v-bind:src="item.path" alt="" 
         :class="index==currentIndex  ? 'activeImg':''">
     
   </ul>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {

                currentIndex:0,

                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',                                                                            
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            },
            methods:{
                changeIndex(i) {
                    this.currentIndex=i

                }
            }
        })
    </script>
</body>

</html>